<template>
  <div w-full h-screen box-border pa-60px flex flex-col items-center :style="{ backgroundColor: curTopic.bgColor }">
    <div w-full flex flex-col justify-center items-center bg-white rounded-40px py-50px>
      <img src="@/assets/images/huanying_title.png" w-600px h-60px alt="" />
      <img src="@/assets/images/sub_huanying_title.png" w-797px h-17px mt-28px alt="" />
    </div>
    <img src="@/assets/images/line.png" w-840px h-1px mt--1px alt="" />
    <!-- <div w-full flex justify-center items-center>
      <div class="dashed-line"></div>
    </div> -->
    <div w-full flex flex-col items-center bg-white rounded-40px pt-40px pb-54px h-1410px>
      <div w-full box-border px-86px flex justify-between items-center>
        <div>
          <div text-47px font-bold mb-6px>综合查询</div>
          <titleline :color="curTopic.mainColor" w-150px h-10px></titleline>
          <div text-40px mt-30px style="font-family: Douyin Sans, Douyin Sans">手环编号: {{ no }}</div>
        </div>
        <div text-40px>
          <span text-76px mr-10px style="font-family: SanJiLiLiangTiJian">{{ memberInfo.points }}</span>
          分
        </div>
      </div>
      <!-- <div w-840px h-1px shrink-0 :style="{ backgroundColor: curTopic.mainColor }"></div> -->
      <div w-full text-40px>
        <div flex flex-a-c p-46px overflow-x-auto w-full box-border bg="#fff">
          <div
            v-for="(item, index) in tabs"
            @click="curTabKey = item.key"
            :key="index"
            flex
            flex-items-center
            flex-col
            shrink-0
            px-29px
            text-center
            cursor-pointer>
            <div
              font-bold
              text-40px
              h-90px
              flex
              items-center
              shrink-0
              :class="{ 'text-44px': curTabKey === item.key }"
              :style="{
                color: curTabKey === item.key ? '#111' : '#666'
              }">
              {{ item.title }}
            </div>
            <div
              h-10px
              w-85px
              rounded-14px
              :style="{
                backgroundColor: curTabKey === item.key ? curTopic.bgColor : 'transparent'
              }"></div>
          </div>
        </div>
        <div h-987px overflow-auto>
          <xunzhangZH v-if="curTabKey === 'xunzhang'" :no="no" />
          <jifen v-if="curTabKey === 'jifen'" :no="no" :zonghe="true" />
          <goods
            v-if="curTabKey === 'keduihuan' || curTabKey === 'jifenshangping'"
            :key="curTabKey"
            :points="memberInfo.points"
            :type="curTabKey"
            @click="toGoodsDetail" />
        </div>
      </div>
    </div>
    <div
      flex
      justify-around
      items-center
      fixed
      bottom-70px
      w-619px
      h-144px
      bottom-58px
      rounded-full
      bg="#fff"
      px-20px
      text-46px
      box-border
      style="box-shadow: 0px 0 15px 3px rgba(167, 167, 167, 0.5)"
      @click="toPrint">
      <div
        :style="{ backgroundColor: curTopic.mainColor }"
        w-full
        h-115px
        rounded-full
        flex
        justify-center
        items-center
        style="font-family: PingFang SC, PingFang SC">
        打印报告
      </div>
    </div>
  </div>
  <div v-if="showConfirm" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
    <div class="bg-white rounded-20px w-600px p-40px">
      <div flex justify-center mb-20px text-40px>提示</div>
      <div class="text-36px text-center mb-40px">一个用户一天只能打印2次，请谨慎操作！是否确定打印？</div>
      <div class="flex justify-around">
        <button @click="cancelPrint" class="w-200px h-80px rounded-40px border-2 border-gray-300 text-32px">
          取消
        </button>
        <button
          @click="confirmPrint"
          class="w-200px h-80px rounded-40px text-white text-32px"
          :style="{ backgroundColor: curTopic.mainColor }">
          确定
        </button>
      </div>
    </div>
  </div>

  <div v-if="showPrinting" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
    <div class="bg-white rounded-20px w-600px p-40px text-center">
      <div class="text-40px">
        {{ printSuccess ? '恭喜您，打印完成！' : '打印中，请稍后...' }}
      </div>
      <div v-if="!printSuccess" class="flex justify-center mt-40px">
        <div class="loading-spinner"></div>
      </div>
    </div>
  </div>

  <div v-if="showLimitDialog" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
    <div class="bg-white rounded-20px w-600px p-40px">
      <div flex justify-center mb-20px text-40px>提示</div>
      <div class="text-36px text-center mb-40px">对不起，该卡号今日无打印次数！</div>
      <div class="flex justify-center">
        <button
          @click="showLimitDialog = false"
          class="w-200px h-80px rounded-40px text-white text-32px"
          :style="{ backgroundColor: curTopic.mainColor }">
          确定
        </button>
      </div>
    </div>
  </div>
  <back></back>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { showToast } from '@nutui/nutui'
import { useConfigStore } from '@/store/modules/config'
import { cardInfo, print, medalList } from '@/api/index'
import { startRedirectToHome, stopRedirectToHome } from '@/utils/screenSaver'

import xunzhangZH from '@/components/xunzhang/index-zh.vue'
import jifen from '@/components/jifen/index.vue'
import goods from '@/components/goods/index.vue'
import back from '@/components/back/index.vue'
import titleline from '@/components/titleline/index.vue'
const route = useRoute()
const router = useRouter()
const configStore = useConfigStore()

// 状态管理
const curTopic = configStore.topics
const deviceInfo = configStore.deviceInfo

const no = ref(route.query.no)
const curTabKey = ref('xunzhang')
const medalDataList = ref([])
const tabs = ref([
  { title: '勋章', key: 'xunzhang' },
  { title: '积分', key: 'jifen' },
  { title: '可兑换商品', key: 'keduihuan' },
  { title: '积分商品', key: 'jifenshangping' }
])
const memberInfo = ref({}) // 智能卡信息
const showConfirm = ref(false)
const showPrinting = ref(false) // 新增打印中状态
const printSuccess = ref(false) // 新增打印成功状态
const showLimitDialog = ref(false) // 新增独立的状态控制打印限制弹窗

// 数据初始化
function getCardInfo() {
  cardInfo({ memberNumber: no.value, ...deviceInfo }).then((res) => {
    memberInfo.value = res.data
  })
}

function toGoodsDetail(id) {
  router.push({ path: '/goodsDetail', query: { id } })
}

function toPrint() {
  showConfirm.value = true
}
const resetTimer = () => {
  startRedirectToHome() // 重置跳转逻辑
}

// 暂时关闭重定向到首页的操作
function stopRedirectToHome1() {
  stopRedirectToHome()
  // 移除用户操作事件监听
  document.removeEventListener('click', resetTimer)
  document.removeEventListener('touchstart', resetTimer)
}
function startRedirectToHome1() {
  startRedirectToHome()
  // 监听用户操作事件
  document.addEventListener('click', resetTimer)
  document.addEventListener('touchstart', resetTimer)
}

function confirmPrint() {
  // 这里添加实际的打印逻辑
  const trophys = medalDataList.value
    .filter((item) => item.trophy == '1/1')
    .map((item) => {
      return {
        subjectName: item.subjectName,
        value: item.medal
      }
    })
  showConfirm.value = false
  showPrinting.value = true // 显示打印中loading
  stopRedirectToHome1()
  print({
    id: curTopic.logId,
    points: memberInfo.value.points,
    memberNumber: no.value,
    trophys
  })
    .then((res) => {
      if (res.data == '1') {
        printSuccess.value = true
        setTimeout(() => {
          showPrinting.value = false
          router.replace('/')
          window.history.replaceState(null, '', '/')
          window.history.pushState(null, '', '/')
        }, 3000)
      } else if (res.data == '2') {
        showPrinting.value = false
        showLimitDialog.value = true // 使用独立的弹窗状态
        startRedirectToHome1()
      }
    })
    .catch(() => {
      showPrinting.value = false
      showToast.fail('打印服务异常, 请联系工作人员')
      startRedirectToHome1()
    })
}

function cancelPrint() {
  showConfirm.value = false
}

function getData() {
  medalList({
    queryData: no.value,
    subjectId: curTopic.subjectId
  }).then((res) => {
    medalDataList.value = res.data
  })
}

onMounted(() => {
  getCardInfo()
  getData()
  startRedirectToHome1()
})

onUnmounted(() => {
  stopRedirectToHome1()
})
</script>

<style scoped>
.dashed-line {
  width: 92%;
  height: 2px;
  background: linear-gradient(
    to right,
    #fff 0%,
    #fff 10%,
    transparent 10%,
    transparent 20%,
    #fff 20%,
    #fff 40%,
    transparent 40%,
    transparent 70%,
    #fff 70%,
    #fff 90%
  );
  background-size: 100px 100%; /* 控制整个虚线周期的长度 */
  background-repeat: repeat-x;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
